<template>
    <div class="container">
        <div v-for="(item, index) in DrawList" :key="index" class="prize-item"
            :class="currentIndex === index ? 'active' : ''" v-bind:class="index == 4 ? 'choujiang' : ''"
            @click="() => draw(index)">
            <!-- <img :src="item.url" alt="" /> -->
            <p class="desc">{{ item.desc }}</p>
        </div>
    </div>
</template>
   
<script setup lang="ts">
// import none from '../assets/none.png'
// import topPrize from '../assets/top-prize.png'
// import secondPrize from '../assets/second-prize.png'
// import thirdPrize from '../assets/third-prize.png'
// import fourthPrize from '../assets/fourth-prize.png'
// import redEnvelope from '../assets/red-envelope.png'

interface Prize {
    url?: string
    desc: string
}

const pirzeList: Prize[] = [
    { desc: '现金红包' },
    { desc: '一等奖' },
    { desc: '三等奖' },
    { desc: '谢谢参与' },
    { desc: '二等奖' },
    { desc: '现金红包' },
    { desc: '谢谢参与' },
    { desc: '四等奖' }
]
const btnStart = { url: '', desc: '开始抽奖' }
const DrawList = computed(() => {
    return [...pirzeList.slice(0, 4), btnStart, ...pirzeList.slice(4)]
})
const drawOrder = [0, 1, 2, 5, 8, 7, 6, 3] // 抽奖顺序
let count = 0 // 抽奖次数
let isDrawing = false // 是否正在抽奖
const currentIndex = ref<number | null>(null) // 当前选中的奖品
const circle = 32 // 一圈8个奖品，至少转4圈

const draw = (index: number) => {
    if (index === 4) {
        // 开始抽奖
        if (isDrawing) {
            return
        }
        isDrawing = true

        // const position = 1 // 假设后台返回的中奖位置是5
        const position: any = set() // 设置了概率

        const timer = setInterval(() => {
            currentIndex.value = drawOrder[count % drawOrder.length]
            count++
            if (count > circle && currentIndex.value === drawOrder[position - 1]) {
                // 抽奖结束
                clearInterval(timer)
                // 停顿一会显示中奖
                setTimeout(() => {
                    if (position == 1) {
                        alert("恭喜您，获得现金红包");
                    } else if (position == 2) {
                        alert("恭喜您，获得一等奖");
                    } else if (position == 3) {
                        alert("恭喜您，获三等奖");
                    } else if (position == 4) {
                        alert("恭喜您，获得二等奖");
                    } else if (position == 5) {
                        alert("恭喜您，获得2四等奖");
                    } else if (position == 6) {
                        alert("很遗憾，谢谢参与");
                    } else if (position == 7) {
                        alert("恭喜您，获得现金红包");
                    } else if (position == 8) {
                        alert("很遗憾，谢谢参与");
                    }
                    isDrawing = false
                    count = 0
                    currentIndex.value = null
                }, 500)
            }
        }, 50)
    }
}

//设置概率
const set = () => {
    let winIndex;
    //方法2
    let __rand__ = Math.random();
    if (__rand__ < 0.3) winIndex = 8;
    else if (__rand__ < 0.55) winIndex = 6;
    else if (__rand__ < 0.75) winIndex = 1;
    else if (__rand__ < 0.85) winIndex = 7;
    else if (__rand__ < 0.92) winIndex = 5;
    else if (__rand__ < 0.97) winIndex = 4;
    else if (__rand__ < 0.99) winIndex = 3;
    else if (__rand__ == 0.99) winIndex = 2;

    return winIndex;
}
</script>
   
<style lang="less" scoped>
.container {
    width: 528px;
    height: 528px;
    // background: url('../assets/bg.png') no-repeat;
    padding: 55px 55px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;

    .prize-item {
        width: 131px;
        height: 131px;
        text-align: center;
        border: 1px solid #ccc;

        img {
            margin-top: 10px;
        }
    }

    .choujiang {
        cursor: pointer;
    }

    .active {
        background-color: rgb(214, 83, 83);
    }
}
</style>